<template>
  <div style="font-family: Calibri">
    <mini-audio v-if="src" :audio-source="src"></mini-audio>
    <pre v-html="formattedContent" class="responsive-pre"></pre>
  </div>
</template>

<script>
import axios from "axios";
import host from "@/utils/host";

export default {
  data() {
    return {
      fileContent: "",
      src: "", // 音频资源的链接
      formattedContent: "",
    };
  },
  methods: {
    async getFileContent() {
      const url = `http://${host}:9080/audio/text/${this.$route.query.name}.txt`;
      try {
        const response = await axios.get(url);
        this.fileContent = response.data;
        // 保持原有格式
        this.formattedContent = this.fileContent.replace(/\n/g, "<br>");
        this.src = "http://" + host + ":9080/audio/" + this.$route.query.path;
      } catch (error) {
        console.error(error);
      }
    },
  },
  created() {
    this.getFileContent();
  },
};
</script>

<style scoped>
.responsive-pre {
  word-wrap: break-word; /* 在单词内部换行 */
  width: 100%; /* 宽度为父元素的100% */
  max-width: 100%; /* 最大宽度为100% */
  overflow-x: auto; /* 如果内容超出宽度，允许水平滚动 */
}
</style>
